<template>
  <el-row :gutter="16">
    <el-col :span="24">
      <div class="statistic-container">
        <!-- 团队数量卡片 -->
        <el-tooltip effect="dark" content="您加入的团队数量" placement="top" :open-delay="300">
          <el-card class="statistic-card green-card" :body-style="{ padding: '12px' }">
            <div class="card-content">
              <span class="label">团队数量：</span>
              <span class="value">{{ teamCount }}</span>
            </div>
          </el-card>
        </el-tooltip>

        <!-- 项目数量卡片 -->
        <el-tooltip effect="dark" content="你的团队所拥有的项目数量" placement="top" :open-delay="300">
          <el-card class="statistic-card yellow-card" :body-style="{ padding: '12px' }">
            <div class="card-content">
              <span class="label">项目数量：</span>
              <span class="value">{{ projectCount }}</span>
            </div>
          </el-card>
        </el-tooltip>

        <!-- 成员个数卡片 -->
        <el-tooltip effect="dark" content="您的团队总成员数" placement="top" :open-delay="300">
          <el-card class="statistic-card blue-card" :body-style="{ padding: '12px' }">
            <div class="card-content">
              <span class="label">成员个数：</span>
              <span class="value">{{ memberCount }}</span>
            </div>
          </el-card>
        </el-tooltip>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import axios from '../http/index'; // 引入 axios 库

// 静态数据（后续可以通过请求动态更新）
const teamCount = ref(0); // 团队数量
const projectCount = ref(0); // 项目数量
const memberCount = ref(0); // 成员个数
// 动画函数
const animateValue = (valueRef, targetValue) => {
  let current = 0;
  const interval = setInterval(() => {
    if (current < targetValue) {
      current += 1;
      valueRef.value = current;
    } else {
      clearInterval(interval);
    }
  }, 50); // 每次增加的速度
};
// 获取数据的函数
const getCount = () => {
  axios.get('team/getTeamSum')
    .then((response) => {
      animateValue(teamCount, response.sum); // 动态更新团队数量
    })
    .catch((error) => {
      console.error('Failed to fetch team count:', error);
    });

  axios.get('project/getProjectSum')
    .then((response) => {
      animateValue(projectCount, response.sum); // 动态更新项目数量
    })
    .catch((error) => {
      console.error('Failed to fetch project count:', error);
    });

  axios.get('project/getMemberSum')
    .then((response) => {
      animateValue(memberCount, response.sum); // 动态更新成员个数
    })
    .catch((error) => {
      console.error('Failed to fetch member count:', error);
    });
};

// 模拟动态数据更新
onMounted(() => {
  getCount(); // 获取数据
});
</script>

<style scoped>
.statistic-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-card {
  flex: 1;
  margin: 0 8px;
  /* 添加一些间距 */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 调整阴影效果 */
  transition: transform 0.3s;
  max-width: 160px;
  /* 限制卡片宽度 */
  position: relative;
}

.statistic-card:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* 绿色卡片 */
.green-card {
  background-color: #d4f1e7;
  /* 浅绿色背景 */
  border-color: #38c172;
  /* 绿色边框 */
  color: #38c172;
  /* 绿色文字 */
}

/* 黄色卡片 */
.yellow-card {
  background-color: #fff9e6;
  /* 浅黄色背景 */
  border-color: #f2c96d;
  /* 黄色边框 */
  color: #f2c96d;
  /* 黄色文字 */
}

/* 蓝色卡片 */
.blue-card {
  background-color: #e6f7ff;
  /* 浅蓝色背景 */
  border-color: #3490dc;
  /* 蓝色边框 */
  color: #3490dc;
  /* 蓝色文字 */
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  font-size: 14px;
  font-weight: bold;
}

.value {
  font-size: 18px;
}
</style>